<template>

	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''"
						:highlight-current="true" :expand-on-click-node="false" :default-expand-all="true"
						:filter-node-method="groupFilterNode" @node-click="groupClick">

						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">{{ data.cat_name }}</span>
								<span class="code" v-if="false">{{ node.cat_name }}</span>
								<span class="do">
									<el-button-group>


									</el-button-group>
								</span>
							</span>
						</template>

					</el-tree>
				</el-main>
			</el-container>
		</el-aside>

		<el-container>
			<el-header>
				<div class="left-panel">
					<el-date-picker v-model="search.dateRange" type="daterange" align="right" unlink-panels
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"
						value-format="YYYY-MM-DD">
					</el-date-picker>
					<div class="right-panel-search" style="padding-left: 15px;">
						<el-input style="width: 200px;" v-model="search.keyword" placeholder="姓名/订单编号/项目名" clearable></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch">查询</el-button>
					</div>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<sc-file-export :apiObj="$API.system.order.fileExport" :data="{dateRange:search.dateRange}"
							fileName="订单明细"></sc-file-export>
					</div>
				</div>
			</el-header>
			<div>
				<el-card shadow="never">
					<sc-select-filter :data="state" :selected-values="selectedValues" :label-width="80"
						@on-change="stateChange"></sc-select-filter>
				</el-card>
			</div>
			<el-main class="nopadding">

				<scTable @row-click="rowClick" ref="table" :apiObj="apiObj" row-key="id"
					@selection-change="selectionChange" :default-expand-all="true">
					<el-table-column type="selection" width="35"></el-table-column>
					<el-table-column label="订单号" prop="order_no" width="170">
						<template #default="scope">
							<p @click="orderNoClick(scope.row)">{{scope.row.order_no}}</p>
						</template>
					</el-table-column>
					<el-table-column label="商品详情" prop="order_address.contact_phone" width="220">
						<template #default="scope">
							<template v-for="(item) in scope.row.items">
								<p style="text-decoration: underline;">{{item.product.product_title}} x
									{{item.item_sku_quantity}}
								</p>
							</template>
							<p>应付总额: {{scope.row.order_payable_amount}}</p>
							<p>所需积分: {{scope.row.order_points}}</p>
						</template>
					</el-table-column>
					<el-table-column label="收货人" prop="order_address.contact_phone" width="135">
						<template #default="scope">
							<el-tag v-if="scope.row.order_address.contact_name"
								type="success">{{scope.row.order_address.contact_name}}</el-tag>
							<br>
							<el-tag v-if="scope.row.order_address.contact_phone"
								type="danger">{{scope.row.order_address.contact_phone}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="核销人" prop="write_off_user" width="250">
						<template #default="scope">
							<view v-if="scope.row.write_off_user">
								<el-descriptions :column="1" border size="small">
									<el-descriptions-item label="核销人">
										{{scope.row.write_off_user.account_emp_name}}
									</el-descriptions-item>
									<el-descriptions-item label="手机">
										{{scope.row.write_off_user.account_phone}}
									</el-descriptions-item>
									<el-descriptions-item label="门店">
										{{scope.row.write_off_user.account_emp_org}}
									</el-descriptions-item>
								</el-descriptions>
							</view>
							<view v-else>
								-
							</view>
						</template>
					</el-table-column>
					<el-table-column label="积分相关" prop="order_extra" width="350">
						<template #default="scope">
							<view
								v-if="scope.row.order_extra && scope.row.order_extra.exchange && scope.row.order_extra.exchange.points_account">
								<el-descriptions :column="1" border size="small"
									v-if="scope.row.order_extra && scope.row.order_extra.exchange && scope.row.order_extra.exchange.points_account">
									<el-descriptions-item label="积分账户">
										{{scope.row.order_extra.exchange.points_account.ctm_name}}
									</el-descriptions-item>
									<el-descriptions-item label="账户卡号">
										{{scope.row.order_extra.exchange.points_account.ctm_code}}
									</el-descriptions-item>
									<el-descriptions-item label="所属门店">
										{{scope.row.order_extra.exchange.points_account.org_name}}
										[机构编号:{{scope.row.order_extra.exchange.points_account.org_code}}]
									</el-descriptions-item>
								</el-descriptions>
							</view>
							<view v-else>
								-
							</view>
						</template>
					</el-table-column>
					<el-table-column label="时间" prop="created_at" width="220">
						<template #default="scope">
							<p>下单时间: {{scope.row.created_at}}</p>
							<p v-if="scope.row.order_paid_at">支付时间: {{scope.row.order_paid_at}}</p>
							<p v-if="scope.row.order_confirm_at">核销时间: {{scope.row.order_confirm_at}}</p>
							<p v-if="scope.row.order_refund_request_at">申请退款时间: {{scope.row.order_refund_request_at}}
							</p>
							<p v-if="scope.row.order_refund_at">退款时间: {{scope.row.order_refund_at}}</p>
						</template>
					</el-table-column>
					<el-table-column label="订单状态" prop="status" width="180">
						<template #default="scope">
							<el-tag v-if="scope.row.status=='已完成'" type="success">{{scope.row.status}}</el-tag>
							<el-tag v-else type="danger">{{scope.row.status}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="备注" prop="order_remark" min-width="300"></el-table-column>
					<el-table-column label="操作" fixed="right" align="right" width="80" v-if="false">
						<template>
							<el-button-group>
								<el-button text type="primary" size="small">查看</el-button>
								<!-- @click="table_show(scope.row, scope.$index)" -->
								<!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
								<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
									<template #reference>
										<el-button text type="primary" size="small">删除</el-button>
									</template>
								</el-popconfirm> -->
							</el-button-group>
						</template>
					</el-table-column>

				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="infoDrawer" title="订单详情" :size="800" destroy-on-close>
		<info ref="info"></info>
	</el-drawer>

</template>

<script>
	import info from './info'
	export default {
		name: 'order.manage',
		components: {
			info
		},
		data() {
			return {
				shortcuts: [{
						text: '最近一周',
						value: () => {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							return [start, end]
						},
					}, {
						text: '最近一个月',
						value: () => {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							return [start, end]
						},
					},
					{
						text: '最近三个月',
						value: () => {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							return [start, end]
						},
					},
				],
				showGrouploading: false,
				groupFilterText: '',
				infoDrawer: false,
				dialog: {
					save: false
				},
				group: [],
				apiObj: this.$API.system.order.list,
				selection: [],
				search: {
					keyword: null,
					dateRange: '',
				},
				state: [{
					title: "订单状态",
					key: "status",
					options: [{
							label: "全部",
							value: null
						},
						{
							label: "待付款",
							value: '待付款',
						},
						{
							label: "待核销",
							value: '待核销',
							icon: "el-icon-flag"
						},
						{
							label: "已完成",
							value: '已完成',
						},
						{
							label: "退款/售后",
							value: '退款售后',
						}, {
							label: "待处理",
							value: '待处理',
						}
					]
				}],
				selectedValues: {
					state: [""],
					type: [""]
				}
			}
		},
		mounted() {
			this.getGroup()
		},
		methods: {
			stateChange(e) {
				var params = {
					state: e
				}
				this.$refs.table.upData(params)
			},
			//树点击事件
			groupClick(data) {
				var params = {
					category_id: data.id
				}
				this.$refs.table.upData(params)
			},
			//树过滤
			groupFilterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			//加载树数据
			async getGroup() {
				this.showGrouploading = true;
				var res = await this.$API.system.category.tree.get();
				this.showGrouploading = false;
				var allNode = {
					id: '',
					cat_name: '所有',
					dept_path: ''
				}
				res.data.unshift(allNode);
				this.group = res.data;
			},
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection;
			},
			//搜索
			upsearch() {
				this.$refs.table.upData(this.search)
			},
			//根据ID获取树结构
			filterTree(id) {
				var target = null;

				function filter(tree) {
					tree.forEach(item => {
						if (item.id == id) {
							target = item
						}
						if (item.children) {
							filter(item.children)
						}
					})
				}
				filter(this.$refs.table.tableData)
				return target
			},
			rowClick(row) {

			},
			orderNoClick(row) {
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			//本地更新数据
			handleSaveSuccess(data, mode) {
				if (mode == 'add') {
					this.$refs.table.refresh()
				} else if (mode == 'edit') {
					this.$refs.table.refresh()
				}
			}
		}
	}
</script>

<style>
</style>
